<template>
  <el-menu
      default-active="2"
      :collapse="collapsed"
      collapse-transition router
      :default-active="$route.path"
      unique-opened
      class="el-menu-vertical-demo"
      background-color="deepskyblue"
      text-color="#fff"
      active-text-color="#ffd04b">
    <div class="logobox">
      <img class="logoimg" src="../assets/img/logo.png" alt="">
    </div>
    <el-submenu v-for="menu in allmenu" :key="menu.menuid" :index="menu.menuname">
      <template slot="title">
        <i class="iconfont" :class="menu.icon"></i>
        <span>{{menu.menuname}}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item v-for="chmenu in menu.menus" :index="'/'+chmenu.url" :key="chmenu.menuid">
          <i class="iconfont" :class="chmenu.icon"></i>
          <span>{{chmenu.menuname}}</span>
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
import { menu } from '../api/axiosFun'
export default {
  name: 'leftnav',
  data() {
    return {
      collapsed: false,
      allmenu: []
    }
  },
  // 创建完毕状态(里面是操作)
  created() {
    // 获取图形验证码
    let res = {
      success: true,
      data: [
        {
          menuid: 1,
          icon: 'li-icon-xiangmuguanli',
          menuname: '商品',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 2,
              icon: 'icon-cat-skuQuery',
              menuname: '商品管理',
              hasThird: 'N',
              url: 'basic/goods/Goods',
              menus: null
            },
            {
              menuid: 3,
              icon: 'el-icon-more-outline',
              menuname: '品类管理',
              hasThird: null,
              url: 'basic/category/Category',
              menus: null
            }
          ]
        },
        {
          menuid:10,
          icon:'li-icon-xitongguanli',
          menuname:'订单',
          hasThird:null,
          url:null,
          menus: [
            {
              menuid: 11,
              icon: 'icon-cs-manage',
              menuname: '订单管理',
              hasThird: null,
              url: 'order/Orders',
              menus: null
            }
          ]
        },
        {
          menuid:10,
          icon:'li-icon-xitongguanli',
          menuname:'用户',
          hasThird:null,
          url:null,
          menus: [
            {
              menuid: 11,
              icon: 'icon-cs-manage',
              menuname: '用户列表',
              hasThird: null,
              url: 'user/Users',
              menus: null
            }
          ]
        },
        {
          menuid: 1,
          icon: 'li-icon-xiangmuguanli',
          menuname: '图表',
          hasThird: null,
          url: null,
          menus: [
            {
              menuid: 2,
              icon: 'icon-cat-skuQuery',
              menuname: '图表管理',
              hasThird: 'N',
              url: 'home/Chart',
              menus: null
            }
          ]
        }

      ],
      msg: 'success'
    }
          this.allmenu = res.data

    // menu(localStorage.getItem('logintoken'))
    //   .then(res => {
    //     console.log(JSON.stringify(res))
    //     if (res.success) {
    //       this.allmenu = res.data
    //     } else {
    //       this.$message.error(res.msg)
    //       return false
    //     }
    //   })
    //   .catch(err => {
    //     this.$message.error('菜单加载失败，请稍后再试！')
    //   })
    // 监听
    this.$root.Bus.$on('toggle', value => {
      this.collapsed = !value
    })
  }
}
</script>
<style lang="stylus" ref="stylesheet/stylus">
.el-menu-vertical-demo:not(.el-menu--collapse)
  width 240px
  min-height 400px
.el-menu-vertical-demo:not(.el-menu--collapse)
  border none
  text-align left
.el-menu-item-group__title,
.el-menu--popup
  padding 0
  // .el-menu-bg
  //   background-color #1f2d3d !important
.el-menu
  border none
  .logobox
    height 40px
    line-height 30px
    color #9d9d9d
    font-size 20px
    text-align center
    padding 20px 0px
    cursor pointer
    .logoimg
      height: 40px
</style>
